import React, { useState, useEffect } from 'react';
import {
    Button, Space, Table, Tag, Drawer, Cascader,
    DatePicker,
    Form,
    Tree,
    Input,
    InputNumber,
    Radio,
    Select,
    Switch,
    message,
    TreeSelect,
  } from 'antd';
import { attendanc_list,attendanc_add,attendanc_bianji,attendanc_delete } from "../../../api/attendanc";
import type { ColumnsType } from 'antd/es/table';
import { SizeType } from 'antd/es/config-provider/SizeContext';

interface Props{

}
interface DataType {
    id:number;
    attendanc:string;
    month: string;
    education: string;
    houserent: string;
    interest: string;
    support: string;
    educate: string;
    baby: string;
  }
//   {
//     "id": 1,
//     "attendanc":"2022-11考勤汇总一",
//     "month": "2016-25",
//     "education": "2022/11/01~2022/11/30",
//     "Houserent": "9",
//     "interest": "无",
//     "support": "已归档",
//     "educate": "2022-11-30 21:39:08",
//     "baby": "0.00",
//     "delete": "0.00"
//   },
function Attendanc(props:Props) {
    const { Option } = Select;
    let [form] = Form.useForm() //定义表单
    let [dataType, setDataType] = useState<DataType[]>([]) //定义表格组件状态--数据
    let [flag, setFlag] = useState(true)//自定义一个开关
    let [id, setid] = useState(0)
  
      //控制抽屉的显示隐藏
      const [open, setOpen] = useState(false);//定义抽屉开关初始值
  
      // 抽屉关闭时触发 
      const onClose = () => {
        setOpen(false);
        form.setFieldsValue({name:'',Bumen:'',phone:'',post:'',Jobnumber:'',zhengjian:'',day:'',pay:"",money:"",Educationi:""})
      }
      var hergrg = async () => {
          var res = await attendanc_list()
          console.log(res.data);
          setDataType(res.data.data)
        }
        useEffect(() => {
          hergrg()
        }, [])
      
  
        const columns: ColumnsType<DataType> = [
            {
              title: '序号',
              // dataIndex: 'name',
              key: 'name',
              width: '120px',
              render: (_, record) => <a>{dataType.indexOf(record) + 1}</a>,
            },
            {
              title: '报表名称',
              // dataIndex: 'age',
              key: 'attendanc',
              width: '263px',
              render: (_, record) => <div>{record.attendanc}</div>
            },
            {
              title: '所属月',
              // dataIndex: 'address',
              key: 'month',
              width: '150px',
              render: (_, record) => <div>{record.month}</div>
            },
            {
              title: '考勤周期',
              // dataIndex: 'address',
              key: 'education',
              width: '150px',
              render: (_, record) => <div>{record.education}</div>
            },
            {
              title: '人数',
              // dataIndex: 'address',
              key: 'houserent',
              width: '170px',
              // text-aligin:center,
              render: (_, record) => <div>{record.houserent}</div>
        
            },
            {
              title: '备注',
              // dataIndex: 'address',
              key: 'interest',
              width: '130px',
              render: (_, record) => <div>{record.interest}</div>
        
            },
            {
              title: '状态',
              // dataIndex: 'address',
              key: 'support',
              width: '150px',
              render: (_, record) => <div>{record.support}</div>
        
            },
            {
              title: ' 入职日期',
              // dataIndex: 'address',
              key: 'educate',
              width: '200px',
              render: (_, record) => <div>{record.educate}</div>
        
            },
            {
                title: '创建人',
                // dataIndex: 'address',
                key: 'baby',
                width: '200px',
                render: (_, record) => <div>{record.baby}</div>
          
            },
            {
              title: '操作',
              key: 'tags',
              dataIndex: 'tags',
              render: (_, record) => {
                return <>
                  <Button onClick={()=>{ edit(record)}}>编辑</Button>
                  <Button onClick={()=>{detel(record.id)}} >删除</Button>
                </>
              }
            },
          ];
          var edit=(item: any) => {
            console.log(item)
            setOpen(true)
            setFlag(false)
            let { id, ...newarr } = item
            setid(id)
            form.setFieldsValue(newarr)
          }
          const  onFinish =async(value:any)=>{
              if(flag){
                  let res=await attendanc_add(value)
                  console.log(res);
                  hergrg()
                  setOpen(false)
                  message.success({content:'新增成功'})
              }else{
                let jiegouzhi={id,...value}
                let res=await attendanc_bianji(jiegouzhi)
                console.log(res);
                hergrg()
                setOpen(false)
                message.success({content:'编辑成功'})
                
              }
          }
          let detel=async(id:number)=>{
            let res=await attendanc_delete({id})
                hergrg()
                message.success({content:'删除成功'})
          }
        const onFinishFailed=(errorInfo: any) => {
          console.log(errorInfo)
          // 新增增加按钮
         
        }
        let newAdd= async()=>{
          setOpen(true)
          setFlag(true)
        }

        return (
            <div className='box'>
              <div className='texts'>
                <p style={{ color: '#000' , fontWeight:"700",fontSize:"20px"}}>考勤报表
    </p>
              </div>
              <div className='buton'>
                <span>
                  <Button type="primary" onClick={()=>{newAdd()}}>增加</Button>
                </span>
                <span>
        
                </span>
              </div>
              <div>
                <Table columns={columns} dataSource={dataType} />
              </div>
              <>
                <Drawer title="Basic Drawer" placement="right" onClose={onClose} open={open}>
                  <Form
                    form={form}
                    // name="basic"
                    labelCol={{ span: 8 }}
                    wrapperCol={{ span: 16 }}
                    style={{ maxWidth: 400 }}
                    onFinish={onFinish}
                    onFinishFailed={onFinishFailed}
                    autoComplete="off"
                  >
                    <Form.Item label="报表名称"
                      name="attendanc">
                      <Input />
                    </Form.Item>
        
                    <Form.Item
                      label="所属月"
                      name="month">
                      <Input />
                    </Form.Item>
        
                    <Form.Item label="考勤周期"
                      name="education">
                      <Input />
                    </Form.Item>
        
                    <Form.Item label="备注"
                      name="interest">
                      <Input />
                    </Form.Item>
                 
                    <Form.Item label="状态"
                      name="support">
                      <Input />
                    </Form.Item>
                    <Form.Item label="人数"
                      name="houserent">
                      <Input />
                    </Form.Item>
                    <Form.Item label="入职日期	"
                      name="educate">
                      <Input />
                    </Form.Item>
                    <Form.Item label="创建人	"
                      name="baby">
                      <Input />
                    </Form.Item>
                    
        
                    <Form.Item label="更新列表">
                      <Button type="primary" htmlType="submit">更新</Button>
                    </Form.Item>
                  </Form>
                </Drawer>
              </>
        
        
        
            </div>
          );
        
}

export default Attendanc;